<template>
	<view class="center">
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-toast ref="uToast" />
		<view class="user_info box_radius">
			<u-form :model="addForm" ref="uForm">
				<u-form-item label="手机号码" prop="password" label-width="180" :label-style="{'padding-left': '20rpx'}">
					<u-input input-align="right" placeholder="请输入手机号码" :clearable="false" disabled
						:custom-style="{'padding-right': '20rpx'}" v-model="mobile" />
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-width="180" :label-style="{'padding-left': '20rpx'}">
					<u-input input-align="right" placeholder="请输入验证码" :clearable="false" v-model="addForm.code"
						type="number" :custom-style="{'padding-right': '20rpx'}"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode" style="margin-right: 20rpx;">
						{{codeTips}}
					</u-button>
				</u-form-item>
				<u-form-item label="新手机号码" prop="mobile" label-width="180" :label-style="{'padding-left': '20rpx'}">
					<u-input input-align="right" placeholder="请输入新手机号码" :clearable="false"
						:custom-style="{'padding-right': '20rpx'}" v-model="addForm.mobile" />
				</u-form-item>
			</u-form>
			<button class="enter " @click="geteditMobile">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		getSms
	} from '@/api/register.js'
	import {
		editMobile
	} from '@/api/my.js'
	export default {
		data() {
			return {
				codeTips: '', //验证码倒计时
				addForm: {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					code: '',
					mobile: '',
					id: uni.getStorageSync('userId')
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					]
				},
				mobile: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad: function(option) {
			console.log('手机号码', option.mobile);
			this.mobile = option.mobile
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					getSms({
						phone: this.mobile
					}).then(res => {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
							icon: false
						})
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//修改手机号码
			geteditMobile() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('参数', this.addForm, valid)
						editMobile(this.addForm).then(res => {
							uni.clearStorageSync(); //清除缓存
							this.$refs.uToast.show({
								title: res.msg,
								icon: false,
								type: 'success'
							})
							uni.reLaunch({
								url: "/pages/login/index",
							});
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						return false
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-form-item__message {
		text-align: right;
		margin-right: 20rpx;
	}

	.user_info {
		background-color: #f2f1f1;
		margin: 20rpx 0;
		padding: 10rpx 0;

		.inro {
			line-height: 80rpx;
			padding: 10rpx 20rpx;
		}
	}

	.enter {
		letter-spacing: 8rpx;
		overflow: hidden;
		border-color: #4880ff;
		font-size: 32rpx;
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, 0);
		width: 95%;
		margin: 40rpx 0 0 0;
		background-color: #4880ff;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		padding: 10rpx 0;
		border-radius: $uni-border-radius-lg;
	}
</style>
